<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item
        :to="{ path: '/nursinghome/nursemain' }"
        class="breadCrumb"
        >首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>护理信息管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="normal-management-main">
      <div class="operater-bar">
        <!--输入和选择区域-->
        <div class="input-select-field">
          <div>
            <el-text class="mx-1">姓名：</el-text>
            <el-input placeholder="请输入姓名" />
          </div>
          <div>
            <el-text class="mx-1">时间：</el-text>
            <el-input placeholder="请输入登记时间"> </el-input>
          </div>
        </div>
        <!--按钮区域-->
        <div class="btn-field">
          <el-button type="primary">搜索</el-button>
          <el-button type="primary">新增</el-button>
        </div>
      </div>
      <!-- 表格区域 -->
      <div class="table-field">
        <el-table :data="tableData" border stripe style="width: 100%">
          <el-table-column prop="nursingId" label="ID" width="50px" />
          <el-table-column prop="elderId" label="老人姓名" width="100px" />
          <el-table-column prop="nursingType" label="护理类型" width="120px" />
          <el-table-column
            prop="nursingContents"
            label="护理内容"
            width="200px"
          />
          <el-table-column prop="nursingTimes" label="护理时间" width="200px" />
          <el-table-column prop="remarks" label="备注" />
          <el-table-column prop="operator" label="操作" width="100">
            <template #default>
              <el-button type="primary" size="small" color="red">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>

  <!-- 详情展示框 -->
  <div>
    <el-dialog v-model="addDialogVisible">
      <h3 style="font-family: 'Microsoft YaHei', sans-serif; color: black">
        护理信息表
      </h3>

      <el-descriptions title="护理信息" border>
        <el-descriptions-item label="护理信息编号">{{
          nursingItem.nursing_id
        }}</el-descriptions-item>
        <el-descriptions-item label="被护理人编号">{{
          nursingItem.elder_id
        }}</el-descriptions-item>
        <el-descriptions-item label="护理类型">{{
          nursingItem.nursing_type
        }}</el-descriptions-item>
        <el-descriptions-item label="护理内容">{{
          nursingItem.nursing_contents
        }}</el-descriptions-item>
        <el-descriptions-item label="护理时间">{{
          nursingItem.nursing_times
        }}</el-descriptions-item>
        <el-descriptions-item label="备注信息">{{
          nursingItem.remarks
        }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{
          nursingItem.create_time
        }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{
          nursingItem.updata_time
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { ElButton, ElDialog } from "element-plus";
import { ref } from "vue";
import * as nursing from "../../api/nursing.js";
let tableData = ref([]);
// 假设的护理信息数据
const nursingItem = ref({
  nursing_id: 1,
  elder_id: 101,
  nursing_type: "日常护理",
  nursing_contents: "洗澡、穿衣",
  nursing_times: "2024-06-19 08:00:00",
  remarks: "无特殊要求",
  create_time: "2024-06-19 08:30:00",
  updata_time: "2024-06-19 08:35:00",
});

// 定义响应式变量控制对话框的显示
const addDialogVisible = ref(false);
const form = ref([]);
const findall = () => {
  nursing.getNursingAPI().then((res) => {
    if (res.data.code != 2000) {
      console.log("请求错误");
    } else {
      form.value = res.data.data;
      tableData.value = form.value;
      console.log(form.value);
    }
  });
};
findall();
// 定义方法来切换对话框的显示状态
const toggleDialog = () => {
  addDialogVisible.value = !addDialogVisible.value;
  return {
    addDialogVisible,
    toggleDialog,
    addDialogClosed,
  };
};

// 定义对话框关闭时调用的方法

// 将需要在模板中使用的响应式变量和方法返回
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 15px;
}

.normal-management-main {
  width: 1175px;
  height: 575px;
}

.operater-bar {
  width: 100%;
  flex-direction: row;
  display: flex;
}

.input-select-field {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 750px;
}

.table-field {
  width: 100%;
  margin-top: 15px;
}

.el-input {
  width: 150px;
}

.el-select {
  width: 150px;
}

.btn-field {
  width: 350px;
  display: flex;
  justify-content: flex-end;

  > .el-button {
    margin-left: 10px;
    margin-right: 10px;
  }
}
</style>
